<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <title>Svg解析</title>

    <link href="../res/reset.css" rel="stylesheet">
    <link href="../res/vscode.css" rel="stylesheet">
    <link href="../res/main.css" rel="stylesheet">
  </head>
  <body style="background-color: antiquewhite">
    <p><h1 style="display: inline">Svg数据解析</h1><img src="${imgPathUri}" width="40" style="display: inline"/></p>
    <label for="data">Svg数据(纯路径数据或者Svg标签数据):</label>

    <div class="propertyWrap">
      <label for="width">width:</label><input id="width" type="text" value="100">
      <label for="height">height:</label><input id="height" type="text" value="100">
      <label for="viewBox">viewBox:</label><input id="viewBox" type="text" value="0 0 100 100">
      <label for="showBorder">显示边框:</label><input id="showBorder" type="checkbox">
    </div>

    <textarea id="data" name="data" style="width:100%" placeholder="请输入Svg数据..." autofocus rows="20"></textarea>
    <div class="button-wrap" style="display: flex; margin-top: 1rem; margin-bottom: 1rem">
      <button id="parse">解析</button>
    </div>
    <label>输出结果:</label>
    <div id="svgWrap" class="svg-wrap" style="margin-top: 1rem; margin-bottom: 1rem">
    </div>
  </body>
  <script src="../res/svgParse.js"></script>
</html>
